<template>
	<view class="content poRel">
		<view class="wid100 dis disAl disJuC" style="height: 349rpx;background-color: #000;">
			<view class="coFFF">
				<view class="dis disJuC" style="height: 70rpx;">
					<image src="../../static/dengjihuizhang1.png" style="width: 65rpx;" class="hei100"></image>
				</view>
				<view class="textCen foSi20 mar-top15">当前等级：{{techinfo.level.this_level_name}}</view>
				<view style="width: 622rpx;" class="mar-top40 mar">
					<view class="borRad40 poRel jinyan">
						<view class="poAbs hei100 jingyan1" :style="'width: '+(622 / 1800 * 1000)+'rpx;background-color: '+theme.main_color+';'"></view>
					</view>
					<view class="dis disAl disJuB foSi20 mar-top10">
						<view>{{techinfo.level.this_level_name}}</view>
						<view>{{techinfo.level.next_level_name}}</view>
					</view>
				</view>
				<view class="mar-top30 foSi20 mar" 
					style="width: 554rpx;color: #636363;">{{techinfo.text}}</view>
			</view>
		</view>
		<view class="wid95 mar mar-top20 bacFFF dis borRad30 foSi22" style="padding: 20rpx 0;">
			<view class="wid25 textCen">
				<view :style="'color: '+theme.main_color+';'" class="foSi25 fowe600 liH44">{{techinfo.yeji}}</view>
				<view class="mar-top10 ">本期业绩</view>
			</view>
			<view class="wid25 textCen">
				<view :style="'color: '+theme.main_color+';'" class="foSi25 fowe600 liH44">{{techinfo.jifen}}</view>
				<view class="mar-top10">本期积分</view>
			</view>
			<view class="wid25 textCen">
				<view :style="'color: '+theme.main_color+';'" class="foSi25 fowe600 liH44">{{techinfo.jiazhonglv}}%</view>
				<view class="mar-top10">本期加钟率</view>
			</view>
			<view class="wid25 textCen">
				<view :style="'color: '+theme.main_color+';'" class="foSi25 fowe600 liH44">{{techinfo.fuwushichang}}</view>
				<view class="mar-top10">本期服务时长 （分钟）</view>
			</view>
			<view class="wid25 textCen">
				<view :style="'color: '+theme.main_color+';'" class="foSi25 fowe600 liH44">{{techinfo.zaixianshichang}}</view>
				<view class="mar-top10">本期在线时长 （小时）</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				techinfo:[],
				theme: null
			}
		},
		onLoad() {
			this.theme = uni.getStorageSync('theme')
			this.getList()
		},
		methods: {
			getList(){
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/tech/tech_level',
					method: "POST",
					header: {
						'site-id': that.global.site_id ,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: uni.getStorageSync('tech_id')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.techinfo = result.data
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}
	.xia{
		height: 1rpx;
		background-color: #E5E5E5;
	}
	.butt1{
		width: 120rpx;
		height: 42rpx;
		color: #8A8A8A;
		border: 1rpx solid #8A8A8A;
		border-radius: 8rpx;
	}
	.butt2{
		width: 120rpx;
		height: 42rpx;
		background-color: #00AD27;
		border: 1rpx solid #00AD27;
		border-radius: 8rpx;
	}
	.jinyan{
		width: 622rpx;
		height: 8rpx;
		background-color: #A0A0A0;
		overflow: hidden;
	}
	.jingyan1{
		left: 0;
		top: 0;
		z-index: 1;
	}
</style>